用canvas画直线的小练习，希望给大家点启发

本来今天想做登陆的，结果安全域名设置这个月用没了，只能下个月做喽，于是心血来潮玩了一下canvas终于有点门道了，暂且做个备忘，大家也给指点一下。本来今天想做登陆的，结果安全域名设置这个月用没了，只能下个月做喽，于是心血来潮玩了一下canvas终于有点门道了，暂且做个备忘，大家也给指点一下。

先展示一下效果

wxml 代码

<button >直线</button>

<canvas style="border:1px solid; width:99%;"  bindtouchstart="canvasBindStart" bindtouchmove="canvasBindMove" canvas-id="1"/>

js 代码

Page({
  data:{
    startX:0,
    startY:0,
    endX:0,
    endY:0
  },
    //绑定出没开始事件，记录起点
   canvasBindStart:function(e){
    var that = this;
    console.log(e);
    that.setData({
      startX:e.touches[0].x,//重点touches后边一定要加索引[0],不然读取不到坐标
      startY:e.touches[0].y//重点touches后边一定要加索引[0],不然读取不到坐标

    });

  },

  //绑定移动事件，并将坐标传递作为终点
  canvasBindMove:function(e){
    var that = this;
    that.setData({
      endX:e.touches[0].x,//重点touches后边一定要加索引[0],不然读取不到坐标
      endY:e.touches[0].y,//重点touches后边一定要加索引[0],不然读取不到坐标

    });
    console.log(e.touches[0].x);//重点touches后边一定要加索引[0],不然读取不到坐标
    //记录上下文
    var context = wx.createContext();
    //设置线条粗细
    context.setLineWidth(4);
    //设置直线的起点
    context.lineTo(that.data.startX, that.data.startY)
    //设置直线的终点
    context.lineTo(that.data.endX, that.data.endY)
    //设置描边，记住画直线一定要设置描边，否则没有图像
    context.stroke()
     wx.drawCanvas({
      canvasId: 1,
      actions: context.getActions()
    });
  },


})